<template>
  <div class="home-container">
  	<div class="wrap" ref="editor">
      <header>
        <h2 v-if="!moduleObj.isBanner">{{moduleObj.name}}</h2>
        <div v-else class="part"> {{moduleObj.name}}</div>

        <div class="part-img"><img style="height: 80px" :src="moduleObj.fileUrl" alt=""></div>
        <div class="features">
          <div class="showTime">
            <span class="time">{{ nowTime }}</span>
            <span class="date">
              <span>{{ week }}</span>
              <span>{{ date }}</span>
            </span>
          </div>
          <div class="" @click="handleWifi">
              <el-tooltip effect="dark" :content="`wifi小程序`" placement="bottom">
                  <i class="iconfont icon icon-wifi"></i>
              </el-tooltip>
          </div>
          <div class="" @click="handleFullScreen">
              <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                  <i class="icon fullscreen el-icon-rank"></i>
              </el-tooltip>
          </div>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="icon el-icon-s-tools"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item divided command="toManage">前往后台</el-dropdown-item>
              <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-tooltip class="item" effect="dark" content="跳转至大屏页面" placement="bottom-start">
            <i class="el-icon-s-tools" @click="toManage()"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="退出登录" placement="bottom-start">
            <i class="el-icon-user-solid" @click="loginOut()"></i>
          </el-tooltip> -->
        </div>
      </header>
      <div v-for="(item,index) in moduleObj.programmeInfoViewList" :key="index">
          <component :is="item.component" :time="item.schedule*1000*60" :address="item.apiUrl" :name="item.authUrl" :style="{left: item.assemblyX+'px',top:item.assemblyY+'px',width: item.width+'px',height: item.height+'px'}" />
      </div>
    </div>
  </div>
</template>

<script>
import { screenSize } from '@/assets/js/utils'

import publicMess from '../utils/publicMess.js';
export default {
  name: 'Home',
  components: {},
  data() {
  	return {
      moduleObj: {},
      nowTime: '',
      week: '',
      date: '',
      fullscreen: false,
  	}
  },
  computed: {
  	
  },
  created() {
    this.getSelf();
  },
  mounted() {
    this.nowTimes();
    screenSize(this.$refs.editor);
  },
  methods: {
    timeFormate(timeStamp) { //显示当前时间
      let newDate = new Date(timeStamp);
      let year = newDate.getFullYear();
      let month = newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1;
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours();
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes();
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds();
      let week = newDate.getDay();
      let weeks = ['日', '一', '二', '三', '四', '五', '六'];
      let getWeek = '星期' + weeks[week];
      this.week = getWeek;
      this.date = year + '.' + month + '.' + date;
      this.nowTime = hh + ':' + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear();
    },
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
          if (document.exitFullscreen) {
              document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
              document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
          }
      } else {
          if (element.requestFullscreen) {
              element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
              element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
              // IE11
              element.msRequestFullscreen();
          }
      }
      this.fullscreen = !this.fullscreen;
    },
    handleWifi() {
      this.$router.push({
        path: '/anylink'
      })
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    },
    toManage() {
      window.location.href = publicMess.url + "/bs_admin/preview?token="+localStorage.getItem('cloud-Auth-Token');
    },
    loginOut() {
      const u = '/signin/userInfo/loginOut';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200 || res.data.code == 10005){
          localStorage.removeItem('cloud-Auth-Token');
          window.location.href = publicMess.url + '/bs_login/';
        }else{
          this.$message.error(res.data.msg);
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == 'loginout') {
        this.loginOut();
      }
      if(command == 'toManage') {
        this.toManage();
      }
    },
    getSelf() {
      
      let arr2 = [];
      const u = '/screen/screenModel/queryModelList?serviceId=1';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          arr2 =  res.data.data;
          this.moduleObj = arr2[0];
        }else{
          if(res.data.code == 10005 || res.data.code == 10012){
            this.$alert('当前登录已失效，请重新登录', '提示', {
              confirmButtonText: '重新登录',
              callback: action => {
                localStorage.removeItem('cloud-Auth-Token');
                window.location.href = publicMess.url + '/bs_login/';
              }
            });
            
          }else if(res.data.code == 10013){
            this.$confirm(res.data.msg, '提示', {
              distinguishCancelAndClose: true,
              confirmButtonText: '前往配置',
              cancelButtonText: '暂不配置'
            })
            .then(() => {
              window.location.href = publicMess.url + '/bs_admin/account?token='+localStorage.getItem('cloud-Auth-Token');
            })
            .catch(action => {
              
            });
          }else {
            this.$message.error(res.data.msg);
          }
        };
      }).catch((err)=>{
          console.log(err);
      });
        
    }
    
  }
}
</script>

<style lang="less" scoped>
.home-container {
	position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #001254;
}	
header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: transparent;
  background: url('https://cloudcampusapps.top/large_screen/img/top_nav.png') no-repeat top center;
  background-position: 65% 0;
  border: none;
  overflow: hidden;
  padding: 5px 0;
  box-sizing: border-box;
  h2 {
    color: #7ef0ff;
    font-size: 30px;
    text-align: center;
    line-height: 68px;
    letter-spacing: 6px;
  }
  .part {
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 68px;
    padding: 0 30px;
    letter-spacing: 6px;
    background: red;
    width: fit-content;
    margin: 0 auto;
  }
  .part-img {
      box-sizing: border-box;
      position: absolute;
      left: 50px;top:5px;
      height: 75px;
  }
  .icon{
    font-size: 40px;
    color: rgba(126, 240, 255, 0.7);
    line-height: 1;
  }
  .fullscreen {
    transform: rotate(45deg);
  }
  .showTime {
    margin-left: 20px;
    color: rgba(126, 240, 255, .7);
    display: flex;
    .time {
      font-size: 28px;
      margin-right: 20px;
      line-height: 2;
    }
    
    .date {
      span {
        display: block;
        &:nth-child(1) {
          font-size: 16px;
          text-align: right;
          line-height: 2;
        }
        &:nth-child(2) {
          font-size: 16px;
          line-height: 2;
        }
      }
    }
  }
  .features {
    position: absolute;
    right: 50px;
    top: 25px;
    color: rgba(126, 240, 255, .7);
    display: flex;
    align-items: center;
    font-size: 40px;
    i {
      margin-left: 20px;
    }
  }
}
</style>
